<template>
  <div class="app-container">
    <form-logs-filter @on-filter="submitFilterForm"/>

    <el-table :data="tableData.list" v-loading="loading" element-loading-text="加载中...">
      <el-table-column label="序号" type="index">
      </el-table-column>
      <el-table-column label="IP" prop="ip">
      </el-table-column>
      <el-table-column label="IP归属地" align="center">
        <template slot-scope="{row}">
          {{row['geoip']['country']}} {{row['geoip']['region']}} {{row['geoip']['city']}}
        </template>
      </el-table-column>
      <el-table-column label="登录网址" prop="domain">
      </el-table-column>
      <el-table-column label="登录设备" prop="platform">
        <template slot-scope="{row}">
          {{row.platform | toConverter('DEVICE_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="loginTime">
        <template slot-scope="{row}">
          {{row['@timestamp'] | toTime}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {getMemberLoginLogs, getMemberLogin} from "@/services/api/member";
  import formLogsFilter from './formLogsFilter'
  import {grid} from '@/build'

  export default {
    name: "user-login-logs",
    mixins: [grid],
    components: {
      formLogsFilter,
    },
    data() {
      const monthTime = [moment().startOf('month').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      return {
        tableData: [],
        filters: {
          userName: this.$store.state.member.member_info.username,
          page: 1,
          size: 20,
          stime: moment(monthTime[0]).valueOf(),
          etime: moment(monthTime[1]).valueOf() + 999,
        },
      }
    },
    methods: {
      submitFilterForm(formInline) {
        const {time} = formInline;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf() + 999;
          formInline = {...formInline, stime, etime}
        } else {
          this.filters.stime = undefined;
          this.filters.etime = undefined;
        }
        this.filters = {...this.filters, ...formInline}
        this.gridSearch();
      },
    },

    mounted() {
      this.bindGet(getMemberLogin, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });
      this.getAll()

    }
  }
</script>

<style lang="scss" scoped>
  .el-card-header {
    padding-bottom: 20px;

    .total-wrap {
      padding: 5px;
      line-height: 2;

      strong {
        display: inline-block;
        text-align: right;
        width: 100px;
        font-size: 14px;
      }

      .total-item {
        font-size: 14px;
        padding: 0 5px;
        display: inline-block;
        min-width: 120px;
      }
    }
  }
</style>
